<template>
  <div class="order_table">
    <el-table class="outer_order_table" :data="orderState.orderList" :border="parentBorder" height="100%"
      style="width: 100%" :row-key="row => row.id" :expand-row-keys="expandedRowKeys"
      v-loading="orderState.orderLoading" :row-class-name="getrowclassname">
      <el-table-column label="订单号" width="80">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ scope.row.id }}</div>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="name" width="120">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ scope.row.created_at }}</div>
        </template>
      </el-table-column>
      <el-table-column label="玩法" prop="name" width="80">
        <template #default="scope">
          <div class="text2 AlibabaPuHuiTi_2_85_">
            {{ scope.row.sport_type == 'soccer' ? '足球' : '篮球' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="赛事" prop="name">
        <template #default="scope">
          <div class="flex_column">
            <div class="text3 AlibabaPuHuiTi_2_85_">{{ scope.row.minfo.home_name }} vs {{ scope.row.minfo.away_name }}
            </div>
            <div class="text4 AlibabaPuHuiTi_2_55_">{{ scope.row.minfo.match_time }} {{ scope.row.minfo.league_name }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="比分" prop="name" align="center" width="130">
        <template #default="scope">
          <div class="flex_column">
            <!-- <div class="text1">FT</div> -->
            <div class="text1 DINAlternate">{{ scope.row.score.score }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="盘口" prop="name" width="160">
        <template #default="scope">
          <div class="text2 AlibabaPuHuiTi_2_55_">{{ scope.row.pk_odds_key_ch }}</div>
          <!-- <div class="text2">{{ scope.row.pk_odds_key_ch }}</div> -->
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="name" width="100">
        <template #default="scope">
          <div class="flex">
            <img v-if="scope.row.run_status == 1" src="@/assets/home/clock.png" style="width: 16px; height: 16px"
              alt="" />
            <img v-if="scope.row.run_status == 2" src="@/assets/home/done.png" style="width: 16px; height: 16px"
              alt="" />
            <img v-if="scope.row.run_status == 3" src="@/assets/home/cancelled.png" style="width: 16px; height: 16px"
              alt="" />
            <div style="margin-left: 4px" :style="runstatusStyle(scope.row.run_status)">
              {{ runstatusMap[scope.row.run_status] }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="赔率(综)" prop="name" width="90">
        <template #default="scope">
          <div class="text1">{{ comprehensiveOdd(scope.row) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="下单金额" prop="name" width="130">
        <template #default="scope">
          <!-- <div class="text1">￥{{ scope.row.total_stake }}/￥{{ scope.row.total_success_stake }}</div> -->
          <div class="flex_column">
            <div class="text1">￥{{ scope.row.total_stake }}</div>
            <div class="text5" style="color: #1cc535">(￥{{ scope.row.total_success_stake }})</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="利润/亏损" prop="name" width="110">
        <template #default="scope">
          <div class="text1">￥{{ scope.row.total_win_back }}</div>
        </template>
      </el-table-column>
      <el-table-column label="" prop="name" width="50">
        <template #default="scope">
          <div>
            <div class="other_div" v-if="scope.row.its_me == 0">他人</div>
            <div class="me_div" v-if="scope.row.its_me == 1">本人</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="40">
        <template v-slot="scope">
          <el-button size="small" type="text" @click="handleExpand(scope.row)">
            <template v-if="!isRowExpanded(scope.row)">
              <img src="@/assets/order/square.png" style="width: 16px; height: 16px" alt="" />
            </template>
            <template v-else>
              <img src="@/assets/order/up-square.png" style="width: 16px; height: 16px" alt="" />
            </template>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="20">
        <template #default="props">
          <!-- >{{props.row.id}} -->
          <div class="expand_order_table">
            <el-table :data="props.row.order_list" style="width: 100%">
              <el-table-column prop="date" label="账号">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.user_name }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="下单人">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.order_user_name }}</div>
                </template>
              </el-table-column>

              <el-table-column prop="date" label="所属人">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.creat_user_name }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="平台">
                <template #default="scope2">
                  <div class="text2">{{ bctypes[scope2.row.bc_type] }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="状态">
                <template #default="scope2">
                  <div class="flex">
                    <img v-if="scope2.row.check_status == 0" src="@/assets/order/shibai.png"
                      style="width: 16px; height: 16px" alt="" />
                    <img v-if="scope2.row.check_status == 1" src="@/assets/order/yijiesuan.png"
                      style="width: 16px; height: 16px" alt="" />
                    <div class="text2" style="margin-left: 4px"
                      :style="scope2.row.check_status == 0 ? 'color: #ff5f58;' : 'color: #2bc7ac;'">
                      {{
                        scope2.row.check_status == 0
                          ? '未结算'
                          : '已结算'
                      }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="赔率">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.place_odds_info }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="平台单号">
                <template #default="scope2">
                  <div style="display: flex;align-items: center;">
                    <!-- <div style="width: 110px; overflow: hidden; text-overflow: ellipsis">
                      {{ scope2.row.bet_id }}
                    </div> -->
                    <el-text style="width: 110px; " class="w-110px mb-2" truncated>
                      {{ scope2.row.bet_id }}
                    </el-text>
                    <div style="cursor: pointer;" @click="OpenImgdialog(scope2.row)">
                      <img style="width: 20px;height: 20px;" :src="photo" alt="">
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="下单金额(虚数)" width="120">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.real_amount }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="下单金额(实数)" width="120">
                <template #default="scope2">
                  <div class="text1">{{ scope2.row.total_amount }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="利润/亏损(虚数)" width="120">
                <template #default="scope2">
                  <div class="text1" :style="scope2.row.win_back >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'">
                    {{ scope2.row.win_back.toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="利润/亏损(实数)" width="120">
                <template #default="scope2">
                  <div class="text1" :style="scope2.row.total_win_back >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'">
                    {{ scope2.row.total_win_back.toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="费率" >
                <template #default="scope2">
                  <div class="text1" :style="scope2.row.total_win_back >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'">
                    {{ scope2.row.share_rate * 1000 }}‰
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="能量扣减">
                <template #default="scope2">
                  <div class="text1" :style="scope2.row.total_win_back >= 0 ? 'color: #1cc535;' : 'color: #ff5f58;'">
                    {{ scope2.row.cost_subtract.toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
              
            </el-table>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const { orderStore, orderState } = inject('OrderStore')
import photo from '@/assets/order/photo.png'

const emits = defineEmits(['change'])
const runstatusMap = ref({
  0: '未进行',
  1: '预约中',
  2: '已完成',
  3: '已取消',
})

const bctypes = ref({
  hga: '皇冠体育',
  ps3838: '平博体育',
  kaiyun: '开云体育',
  isn: '智博体育',
  imsport: 'IM体育',
  manbet165: '万博体育',
  dxvip: '德信体育',
})

const expandedRowKeys = ref([])

const runstatusStyle = value => {
  let a = ''
  switch (value) {
    case 1:
      a = 'color: #feac2e;'
      break
    case 2:
      a = 'color: #1cc535;'
      break
    case 3:
      a = 'color: #ff5f58;'
      break

    default:
      break
  }
  return a
}

const comprehensiveOdd = row => {
  let a = '-'
  let num1 = 0
  let num2 = 0
  let num3 = 0
  row.order_list.forEach(item => {
    num1 += item.total_amount
    num2 += item.total_amount * item.place_odds_info
  })

  if (num1 != 0) {
    num3 = num2 / num1
    a = num3.toFixed(3)
  }
  return a
}

const getrowclassname = data => {
  let a = ''
  if (expandedRowKeys.value.includes(data.row.id)) {
    a = 'active_row'
  }
  return a
}
const handleExpand = row => {
  const rowIndex = expandedRowKeys.value.indexOf(row.id)
  if (rowIndex === -1) {
    expandedRowKeys.value.push(row.id)
  } else {
    expandedRowKeys.value.splice(rowIndex, 1)
  }
}
const OpenImgdialog = (data) => {
emits('change',{
    type: 'openimg',
    data: data
  })
}

const isRowExpanded = row => expandedRowKeys.value.includes(row.id)
</script>

<style lang="scss" scoped>
.order_table {
  width: 100%;
  height: calc(100% - 48px);
  padding: 0 12px 12px 12px;
}

.text1 {
  //   font-family: DINAlternate;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.text2 {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  color: #000;
}

.text3 {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.text4 {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 12px;
  color: #999;
}

.text5 {
  font-size: 14px;
  font-weight: bold;
  color: #1cc535;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex {
  display: flex;
  align-items: center;
}

.other_div {
  width: 32px;
  height: 20px;
  border: solid 1px #ff7900;
  background-color: #fff4ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ff7900;
}

.me_div {
  width: 32px;
  height: 20px;
  border: solid 1px #2bc7ac;
  background-color: #eefefb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #2bc7ac;
}

.expand_order_table {
  padding: 0 8px 8px 8px;
  // background-color: var(--pcvice-color);
}
</style>

<style>
.outer_order_table thead tr th.el-table__cell {
  height: 32px;
  line-height: 32px;
  padding: 6px 0;
  background-color: #f3f5fd;
  font-family: AlibabaPuHuiTi_2_85_;
}

.outer_order_table tbody tr td.el-table__cell {
  border-color: rgba(55, 17, 216, 0.08);
}

.outer_order_table .active_row .el-table__cell {
  border: none;
  background-color: #f8f9fe;
}

.outer_order_table .el-table__expanded-cell {
  background-color: #f8f9fe;
  padding: 8px;
  border-radius: 0 !important;
}

.outer_order_table thead tr th.el-table__cell .cell {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

/* .el-table .el-table__expand-icon {
  display: none;
} */

.outer_order_table .el-table__expand-icon {
  display: none !important;
}

.outer_order_table .el-table .cell {
  padding: 0 4px;
}

/* 使展开列不占据空间 */
.outer_order_table .el-table__expand-column {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.outer_order_table .el-table__expand-column .cell {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.expand_order_table thead tr th.el-table__cell {
  background-color: #eceffa;
}

.expand_order_table tbody tr td.el-table__cell {
  border: none;
}

.outer_order_table .el-table__inner-wrapper::before,
.expand_order_table .el-table__inner-wrapper::before {
  height: 0;
}
</style>